<!DOCTYPE html>
<html class='v2' dir='rtl' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<title> </title>
<meta content='دروس بلوجر, قوالب بلوجر, إضافات بلوجر, قوالب ووردبريس, إضافات ووردبريس, دروس تصميم, دروس سيو' name='description'/>
<meta content='global' name='distribution'/>
<meta content='10 days' name='revisit'/>
<meta content='10 days' name='revisit-after'/>
<meta content='document' name='resource-type'/>
<meta content='all' name='audience'/>
<meta content='general' name='rating'/>
<meta content='blogger' name='generator'/>
<meta content='index, follow' name='robots'/>
<meta content='Abdo Salem' name='author'/>
<meta content='Egypt' name='country'/>
<meta content='Goo4Web' name='copyright'/>
<meta content='IE=9' http-equiv='X-UA-Compatible'/>
<meta content='chrome=1' http-equiv='X-UA-Compatible'/>
<meta content='جو ويب' property='og:site_name'/>
<meta content='http://im55.gulfup.com/aEKnIb.png' property='og:image'/>
<meta content='article' property='og:type'/>
<meta content='100002826770401' property='fb:admins'/>
<meta content='JBhAg7DB2zBTtS9bHmTyefuO4_E' name='alexaVerifyID'/>
<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
<link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/3272375587-widget_css_2_bundle_rtl.css' />
<link type='text/css' rel='stylesheet' href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=1914981488015706407&zxhttp://feedburner.google.com/fb/a/mailverify?uri=Goo4Web=2e746551-01b0-42ea-96e2-c83d555dd128' />
<style id='page-skin-1' type='text/css'><!--
<style id="page-skin-1" type="text/css"><!--
/*-----------------------------------------------*/
Blogger Template Style
Name    : Goo4Web
Designer: Abdo Salem
URL     : www.facebook.com/abdo.salem.genius
/*-----------------------------------------------*/
*,section,.widget{margin:0;padding:0;outline:none;}
.section{margin:0px !important;}
/*-------h------*/
h1,h2,h3,h4,h5,h6,h1 a,h2 a,h3 a,h4 a,h5 a,h6 a
{
color:#444444 !important;
font-weight:700 !important;
}
h3
{
padding-top:5px;
padding-bottom:5px;
}
/*---------a---------*/
a
{
color:#3498db;
font-weight:normal !important;
text-decoration:none;
-o-transition:all 0.2s ease-in-out !important;
-moz-transition:all 0.2s ease-in-out !important;
-webkit-transition:all 0.2s ease-in-out !important;
}
a:hover
{
text-decoration:underline;
}
/*------img-----*/
img
{
max-width:100%;
transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-webkit-transition:all 0.2s ease-in-out;
}
img:hover
{
filter:grayscale(100%);
-o-filter:grayscale(100%);
-ms-filter:grayscale(100%);
-moz-filter:grayscale(100%);
-webkit-filter:grayscale(100%);
}
.avatar-image-container
{
max-height:80px !important;
width:80px !important;
}
.avatar-image-container img
{
width:72px !important;
max-width:72px !important;
padding:2px !important;
border:1px solid #eeeeee !important;
}
/*-----List-----*/
ul,ol,.widget ul,.widget ol
{
list-style:square;
padding:0px;
margin:0px 14px 0px 0px;
}
/*------input------*/
input:focus
{
outline:none !important;
}
/*Buttons*/
input[type = button],input[type = reset],input[type = submit],button
{
background:none !important;
color:#888888 !important;
font-family:'TheSans',Helvetica !important;
font-size:13px !important;
font-weight:bold !important;
padding:8px 12px !important;
max-width:100% !important;
border:1px solid #e0e0e0 !important;
border-radius:0px !important;
-moz-border-radius:0px !important;
-webkit-border-radius:0px !important;
cursor:pointer !important;
text-shadow:none !important;
box-shadow:none !important;
-moz-box-shadow:none !important;
-webkit-box-shadow:none !important;
transition:all 0.5s ease-in-out !important;
-o-transition:all 0.5s ease-in-out !important;
-moz-transition:all 0.5s ease-in-out !important;
-webkit-transition:all 0.5s ease-in-out !important;
}
input[type = button]:hover,input[type = reset]:hover,input[type = submit]:hover,button:hover
{
color:#ffffff !important;
border:1px solid #3498db !important;
text-decoration:none;
text-shadow:0px 1px 0px #104670 !important;
box-shadow:inset -120px 0px 0px #3498db !important;
-moz-box-shadow:inset -120px 0px 0px #3498db !important;
-webkit-box-shadow:inset -120px 0px 0px #3498db !important;
}
/*Text Box & Text Area*/
input[type = text],input[type = email],input[type = password],textarea
{
background:#ffffff !important;
color:#333333 !important;
font-family:'TheSans',Helvetica !important;
font-size:13px !important;
font-weight:normal !important;
padding:8px !important;
margin:3px 0px !important;
max-width:100% !important;
border:1px solid #e0e0e0; !important;
border-radius:0px !important;
-moz-border-radius:0px !important;
-webkit-border-radius:0px !important;
cursor:auto !important;
text-shadow:none !important;
box-shadow:none !important;
-moz-box-shadow:none !important;
-webkit-box-shadow:none !important;
transition:all 0.2s ease-in-out !important;
-o-transition:all 0.2s ease-in-out !important;
-moz-transition:all 0.2s ease-in-out !important;
-webkit-transition:all 0.2s ease-in-out !important;
}
input[type = text]:focus,input[type = email]:focus,input[type = password]:focus,textarea:focus
{
border:1px solid #3498db !important;
}
/*-----labels-----*/
.list-label-widget-content button
{
width:49% !important;
margin:3px 0px !important;
display:inline-block !important;
text-align:right !important;
}
.list-label-widget-content button:hover
{
box-shadow:inset -180px 0px 0px #3498db !important;
-moz-box-shadow:inset -180px 0px 0px #3498db !important;
-webkit-box-shadow:inset -180px 0px 0px #3498db !important;
}
/*--------popular-posts--------*/
.popular-posts ul
{
list-style:none !important;
padding:0px !important;
margin:0px !important;
}
.popular-posts .item-thumbnail
{
float:right;
margin:0px 0px 0px 10px;
}
.popular-posts .item-thumbnail img
{
width:72px !important;
height:auto !important;
padding:2px;
border:1px solid #eeeeee;
transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-webkit-transition:all 0.2s ease-in-out;
}
.popular-posts .item-title
{
font-size:13px !important;
}
.popular-posts .item-snippet
{
font-size:11px !important;
line-height:1.4em;
}
/*------follow-by-email-----*/
.follow-by-email-address
{
width:auto !important;
height:auto !important;
}
.follow-by-email-submit
{
width:auto !important;
height:auto !important;
}
/*------pre------*/
pre
{
background:#f8f8f8;
padding:12px;
direction:ltr;
font-family:Courier;
text-align:left;
line-height:1.4em;
max-height:200px;
text-shadow:0px 1px 0px #ffffff;
overflow:auto;
}
/*------hide-elements------*/
.date-header,.post-location,.post-footer-line-2,.post-footer-line-3,.reaction-buttons,.star-ratings,.post-backlinks,.post-icons,.blog-feeds,.post-feeds,.oadmore,.loaded,.comment-footer,.Attribution,.dummy-container,.sb-pinterest,.sb-blog,.sb-email,.status-msg-wrap,.comments-content .icon,#comments .continue,#dp_swf_engine
{
display:none !important;
}
/*----------body----------*/
body
{
background:#f2f2f2 url(http://im80.gulfup.com/SeWXjn.png) fixed;
padding:0px;
margin:0px;
color:#666666;
font-family:'TheSans',Helvetica !important;
font-size:13px;
font-weight:normal !important;
direction:rtl !important;
line-height:1.8em !important;
position:static !important;
word-wrap:break-word !important;
text-align:right !important;
}
::selection{background:#3498db;color:#ffffff;text-shadow:none;}
::-moz-selection{background:#3498db;color:#ffffff;text-shadow:none;}
::-webkit-selection{background:#3498db;color:#ffffff;text-shadow:none;}
::-webkit-scrollbar{width:12px;}
::-webkit-scrollbar-track{background-color:#ffffff;}
::-webkit-scrollbar-thumb{background-color:#3498db;}
::-webkit-scrollbar-thumb:active{background-color:#888888;}
/*----#control-panel-----*/
#control-panel
{
background:#3498db;
font-size:14px;
position:fixed;
top:0px;
right:0px;
width:100%;
z-index:99999;
box-shadow:0px 1px 2px #222222;
-moz-box-shadow:0px 1px 2px #222222;
-webkit-box-shadow:0px 1px 2px #222222;
}
#control-panel .content
{
width:1000px;
margin:0px auto;
}
#control-panel a
{
color:#ffffff !important;
padding:8px 12px;
font-weight:bold !important;
display:inline-block;
}
#control-panel a:hover
{
background:#ffffff;
color:#3498db !important;
}
/*----------#top----------*/
#top
{
background:url(http://im80.gulfup.com/evQjdl.png);
box-shadow:0px 1px 2px #bbbbbb;
-moz-box-shadow:0px 1px 2px #bbbbbb;
-webkit-box-shadow:0px 1px 2px #bbbbbb;
}
#top .content
{
width:1000px;
margin:0px auto;
}
#top:after
{
clear:both;
content:"";
display:block;
}
/*------#nav------*/
#nav-top
{
background:#222222;
font-size:11px;
padding:0px;
margin:0px;
}
#nav-top ul
{
list-style:none;
padding:0px;
margin:0px;
width:780px;
float:right;
}
#nav-top ul li
{
display:inline-block;
}
#nav-top ul li a
{
color:#ffffff;
text-decoration:none;
display:inline-table;
padding:8px;
font-weight:700 !important;
cursor:hand;
transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-webkit-transition:all 0.2s ease-in-out;
}
#nav-top ul li a:hover
{
color:#ffffff;
text-decoration:none;
text-shadow:0px 1px 0px #104670;
box-shadow:inset 0px 55px 0px #3498db;
-moz-box-shadow:inset 0px 55px 0px #3498db;
-webkit-box-shadow:inset 0px 55px 0px #3498db;
}
#nav-top .email
{
color:#ffffff;
padding:8px;
font-size:13px;
font-weight:700 !important;
text-align:left;
width:200px;
float:left;
}
#nav-top:after
{
clear:both;
content:"";
display:block;
}
/*----------#header----------*/
#header
{
}
#header .logo
{
width:260px;
height:90px;
padding:20px 0px;
float:right;
}
#header .ads
{
width:728px;
height:90px;
padding:20px 0px;
float:left;
}
#header:after
{
clear:both;
content:"";
display:block;
}
/*------#nav------*/
#nav
{
background:#222222;
padding:0px;
margin:0px;
border-bottom:5px solid #3498db;
}
#nav ul
{
list-style:none;
padding:0px;
margin:0px;
float:right;
width:760px;
}
#nav ul li
{
display:inline-block;
}
#nav ul li a
{
color:#ffffff;
text-decoration:none;
display:inline-table;
padding:15px 18px;
font-weight:700 !important;
cursor:hand;
transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-webkit-transition:all 0.2s ease-in-out;
}
#nav ul li a:hover
{
color:#ffffff;
text-decoration:none;
text-shadow:0px 1px 0px #104670;
box-shadow:inset 0px -55px 0px #3498db;
-moz-box-shadow:inset 0px -55px 0px #3498db;
-webkit-box-shadow:inset 0px -55px 0px #3498db;
}
#nav ul li ul
{
background:#222222;
list-style:none;
top:183px;
display:none;
padding:0px;
position:absolute;
z-index:9999;
width:160px;
}
#nav ul li ul li
{
display:list-item;
}
#nav ul li ul li a
{
color:#ffffff;
text-decoration:none;
display:inline-block;
padding:14px;
width:132px;
cursor:hand;
border:none;
margin-right:0px;
transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-webkit-transition:all 0.2s ease-in-out;
}
#nav ul li ul li a:hover
{
text-indent:8px;
color:#ffffff;
}
#nav form
{
width:240px;
text-align:left !important;
float:left;
}
#nav form input[type=text]
{
background:#333333 url(http://www.foxpic.com/V03IQdwE.png) 10px center no-repeat !important;
color:#ffffff !important;
width:120px;
padding-left:32px !important;
margin-top:6px !important;
margin-left:6px !important;
border:1px solid #222222; !important;
border-right:1px solid #222222 !important;
}
#nav form input[type=text]:focus
{
width:180px;
border:1px solid #3498db; !important;
border-right:1px solid #3498db !important;
}
#nav:after
{
clear:both;
content:"";
display:block;
}
/*------#recent-posts-----*/
#recent-posts
{
background:#ffffff;
width:1000px;
margin:20px auto 0px;
overflow:hidden;
height:43px;
box-shadow:0px 1px 2px #bbbbbb;
-moz-box-shadow:0px 1px 2px #bbbbbb;
-webkit-box-shadow:0px 1px 2px #bbbbbb;
}
#recent-posts .title
{
background:#3498db;
color:#ffffff;
font-weight:700 !important;
padding:10px 14px;
display:block;
float:right;
text-shadow:0px 1px 0px #104670;
}
#recent-posts ul
{
float:right;
padding:0px;
margin:0px;
list-style:none;
}
#recent-posts ul li
{
padding:0px;
margin:0px;
}
#recent-posts ul li a
{
color:#666666;
display:block;
padding:10px;
text-decoration:none;
transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-webkit-transition:all 0.2s ease-in-out;
}
#recent-posts ul li a:hover
{
text-indent:12px;
text-decoration:none;
}
/*-------#message-------*/
#message
{
background:#3498db;
color:#ffffff;
width:1000px;
margin:20px auto 0px;
padding:12px;
font-weight:bold !important;
text-align:center;
box-shadow:0px 1px 2px #bbbbbb;
-moz-box-shadow:0px 1px 2px #bbbbbb;
-webkit-box-shadow:0px 1px 2px #bbbbbb;
}
/*------#article-aside------*/
#article-aside
{
word-wrap:break-word;
padding:0px;
width:1000px;
margin-right:auto;
margin-left:auto;
}
#article
{
width:660px;
float:right;
padding:0px;
margin:0px;
}
#aside
{
width:320px;
float:left;
padding:0px;
margin:0px;
}
#article-aside:after
{
display:block;
clear:both;
content:"";
}
/*------#article------*/
.post-outer
{
padding:0px;
margin:20px 0px 0px 0px;
}
.post
{
background:#ffffff;
padding:16px;
box-shadow:0px 1px 2px #bbbbbb;
-moz-box-shadow:0px 1px 2px #bbbbbb;
-webkit-box-shadow:0px 1px 2px #bbbbbb;
}
.post-title
{
color:#444444 !important;
font-size:14px;
padding-bottom:12px;
margin-bottom:15px;
border-bottom:3px solid #f2f2f2;
}
.post-title a
{
color:#444444 !important;
text-decoration:none;
}
.post-title:after
{
background:#3498db;
content:"";
width:35%;
height:3px;
position:absolute;
right:0px;
bottom:-3px;
}
.post-body
{
background:#ffffff;
width:auto;
line-height:1.8em;
}
.post-body h2
{
background:#f8f8f8;
padding:12px;
margin-top:10px;
margin-bottom:10px;
font-size:15px;
border-right:3px solid #3498db;
}
.post-body img
{
width:260px;
height:160px;
padding:2px;
margin-left:16px;
float:right;
font-size:15px;
border:1px solid #eeeeee;
transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-webkit-transition:all 0.2s ease-in-out;
}
.post-content
{
height:120px;
}
.post-meta
{
color:#999999 !important;
width:346px;
font-size:85%;
float:left;
display:block;
}
.post-meta a
{
color:#999999 !important;
}
#read-more
{
position:relative;
top:28px;
right:246px;
display:block;
}
.post-author
{
color:#999999;
display:inline-block;
}
.post-author a
{
color:#999999;
}
.post-timestamp
{
color:#999999;
display:inline-block;
margin:0px !important;
}
.post-comments
{
color:#999999;
display:inline-block;
}
.post-labels
{
color:#999999;
display:inline-block;
}
.post-share-buttons
{
background:#f8f8f8;
padding:8px 8px 0px;
width:617px;
}
.post-share-buttons span
{
background:#3498db;
color:#ffffff;
font-weight:bold !important;
padding:12px;
margin-bottom:-8px;
font-size:13px;
position:relative;
right:-8px;
bottom:8px;
display:inline-block;
text-shadow:0px 1px 0px #104670;
}
#related-posts
{
background:#ffffff;
padding:16px;
margin:20px 0px 0px 0px;
box-shadow:0px 1px 2px #bbbbbb;
-moz-box-shadow:0px 1px 2px #bbbbbb;
-webkit-box-shadow:0px 1px 2px #bbbbbb;
}
#related-posts h4
{
color:#444444 !important;
font-size:14px;
padding-bottom:12px;
border-bottom:3px solid #f2f2f2;
}
#related-posts h4:after
{
background:#3498db;
content:"";
width:35%;
height:3px;
position:absolute;
right:0px;
bottom:-3px;
}
#related-posts ul
{
list-style:none;
}
#related-posts a
{
color:#3498db;
padding:8px;
display:block;
text-decoration:none;
border-top:1px solid #eeeeee;
}
#related-posts a:first-of-type
{
border-top:none;
}
#comments
{
background:#ffffff;
padding:16px;
margin:20px 0px 0px 0px;
box-shadow:0px 1px 2px #bbbbbb;
-moz-box-shadow:0px 1px 2px #bbbbbb;
-webkit-box-shadow:0px 1px 2px #bbbbbb;
}
#comments ol
{
margin:0px !important;
}
.blogger-comment-from-post
{
height:220px;
}
#comments .comment-header
{
background:#f8f8f8;
padding:10px;
margin-right:35px;
margin-bottom:50px;
border-right:3px solid #3498db;
}
#comments .comment-content
{
text-align:right;
}
#comments .comment-content,#comments .comment-actions
{
margin-right:-45px;
}
#comments .comments-content .inline-thread
{
padding-bottom:0px !important;
}
#comments h4
{
color:#444444 !important;
font-size:14px;
padding-bottom:12px;
margin-bottom:15px;
border-bottom:3px solid #f2f2f2;
}
#comments h4:after
{
background:#3498db;
content:"";
width:35%;
height:3px;
position:absolute;
right:0px;
bottom:-3px;
}
.comments-content
{
padding:0px !important;
margin-bottom:0px !important;
}
.comments-content .datetime
{
float:left;
}
.comment:first-child
{
padding-top:0px !important;
}
.comment
{
padding-bottom:0px !important;
margin-bottom:0px !important;
border-bottom:1px solid #eeeeee;
padding-top:10px !important;
}
#comments .thread-toggle
{
margin-bottom:10px;
}
.comment-replies .comment .inline-thread
{
padding:0px !important;
}
#comment-post-message
{
font-size:13px;
margin-top:20px;
}
#blog-pager
{
background:#ffffff;
padding:15px;
margin:20px;
box-shadow:0px 1px 2px #bbbbbb;
-moz-box-shadow:0px 1px 2px #bbbbbb;
-webkit-box-shadow:0px 1px 2px #bbbbbb;
}
#blog-pager-older-link a,#blog-pager-newer-link a
{
color:#888888;
width:80px;
font-size:14px;
padding:12px;
border:1px solid #e0e0e0;
display:block;
text-decoration:none;
transition:all 0.5s ease-in-out !important;
-o-transition:all 0.5s ease-in-out !important;
-moz-transition:all 0.5s ease-in-out !important;
-webkit-transition:all 0.5s ease-in-out !important;
}
#blog-pager-older-link a:hover,#blog-pager-newer-link a:hover
{
color:#ffffff;
border:1px solid #3498db;
text-decoration:none;
text-shadow:0px 1px 0px #104670;
box-shadow:inset -120px 0px 0px #3498db;
-moz-box-shadow:inset -120px 0px 0px #3498db;
-webkit-box-shadow:inset -120px 0px 0px #3498db;
}
/*------#aside------*/
#aside .tabs
{
position:relative;
}
#aside .tabs .tabs-titles
{
list-style:none;
padding:0px;
margin:0px;
text-align:center;
margin-top:30px;
margin-bottom:-6px;
}
#aside .tabs .tabs-titles li
{
display:inline-block;
outline:none !important;
}
#aside .tabs .tabs-titles li .tab-title
{
background:#ffffff;
color:#333333 !important;
font-size:15px;
padding:8px 30px;
outline:none !important;
text-decoration:none;
box-shadow:0px 1px 2px #bbbbbb;
-moz-box-shadow:0px 1px 2px #bbbbbb;
-webkit-box-shadow:0px 1px 2px #bbbbbb;
}
#aside .tabs .tabs-titles li.ui-state-active .tab-title
{
background:#3498db;
color:#ffffff !important;
text-decoration:none;
text-shadow:0px 1px 0px #104670;
}
#aside .widget
{
background:#ffffff;
padding:10px;
margin:20px 0px 0px 0px;
box-shadow:0px 1px 2px #bbbbbb;
-moz-box-shadow:0px 1px 2px #bbbbbb;
-webkit-box-shadow:0px 1px 2px #bbbbbb;
}
#aside .widget h2
{
color:#444444 !important;
font-size:13px;
padding-top:2px;
padding-bottom:8px;
margin-bottom:10px;
border-bottom:3px solid #f2f2f2;
}
#aside .widget h2:after
{
background:#3498db;
content:"";
width:35%;
height:3px;
position:absolute;
right:0px;
bottom:-3px;
}
/*-------------------#bottom---------------------*/
#bottom
{
background:url(http://im80.gulfup.com/evQjdl.png);
margin-top:20px;
box-shadow:0px 1px 2px #bbbbbb;
-moz-box-shadow:0px 1px 2px #bbbbbb;
-webkit-box-shadow:0px 1px 2px #bbbbbb;
}
#bottom .content
{
width:1000px;
margin:0px auto;
}
#bottom a
{
color:#bbbbbb;
}
/*-------------------#footer---------------------*/
#footer
{
color:#bbbbbb;
padding:12px;
font-size:12px;
width:100%;
border-top:5px solid #3498db;
text-shadow:0px 1px 0px #000000;
}
#footer .footer-links
{
display:block;
}
#footer .footer-links a
{
color:#888888 !important;
padding:8px;
margin:3px 1px;
display:inline-block;
border:1px solid #666666;
text-shadow:0px 1px 0px #000000 !important;
text-decoration:none !important;
box-shadow:0px 1px 0px #000000;
-moz-box-shadow:0px 1px 0px #000000;
-webkit-box-shadow:0px 1px 0px #000000;
}
#footer .footer-links a:hover
{
color:#eeeeee !important;
border:1px solid #eeeeee;
text-decoration:none !important;
}
#footer h2
{
color:#ffffff !important;
font-size:15px;
padding-bottom:12px;
margin-bottom:15px;
border-bottom:3px solid #ffffff;
}
#footer h2:after
{
background:#3498db;
content:"";
width:25%;
height:3px;
position:absolute;
right:0px;
bottom:-3px;
}
#footer .widget
{
float:right;
width:312px;
margin:0px 10px;
line-height:1.8em !important;
}
#footer:after
{
clear:both;
content:"";
display:block;
}
/*-------------------#footer-bottom---------------------*/
#footer-bottom
{
background:#222222;
color:#f5f5f5;
padding:12px 20px;
font-size:11px;
}
#footer-bottom .right
{
float:right;
}
#footer-bottom .left
{
float:left;
}
#footer-bottom:after
{
clear:both;
content:"";
display:block;
}
/*---------Media--------*/
@media only screen and (max-width:1050px)
{
}

--></style>
<link href='http://fonts.googleapis.com/earlyaccess/droidarabickufi.css' rel='stylesheet' type='text/css'/>
<style type='text/css'>
body,input
{
font-family:'Droid Arabic kufi',Helvitica !important;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script src='http://code.jquery.com/ui/1.11.2/jquery-ui.js'></script>
<script type='text/javascript'>
summary_noimg = 140;
summary_img = 140;
</script>
<script type='text/javascript'>
//<![CDATA[


function removeHtmlTag(strx,chop){ 
 if(strx.indexOf("<")!=-1)
 {
  var s = strx.split("<"); 
  for(var i=0;i<s.length;i++){ 
   if(s[i].indexOf(">")!=-1){ 
    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); 
   } 
  } 
  strx =  s.join(""); 
 }
 chop = (chop < strx.length-1) ? chop : strx.length-2; 
 while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; 
 strx = strx.substring(0,chop-1); 
 return strx + ''; 
}

function createSummaryAndThumb(pID){
 var div = document.getElementById(pID);
 var imgtag = "";
 var img = div.getElementsByTagName("img");
 var summ = summary_noimg;
 if(img.length>=1) { 
   imgtag = '<img src="'+img[0].src+'"/>';
  summ = summary_img;
 }

 var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + ' [ ... ]</div>';
 div.innerHTML = summary;
}

//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
var vslow = 1500;
var slow = 1000;
var normal = 500;
var fast = 300;
var vfast = 150;

$(function()
{
$("#nav ul li").hover(function(){
$(this).find("ul").toggle("drop")
});
});

$(function()
{
$(".tabs").tabs();
});

//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;}}}}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];}}
relatedTitles = tmp2;
relatedUrls = tmp;}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '"><i class="fa fa-chevron-left"></i> ' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;}
document.write('</ul>');
}
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
(function (factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(['jquery'], factory);
  } else {
    // Browser globals
    factory(jQuery);
  }
}(function ($) {
  $.timeago = function(timestamp) {
    if (timestamp instanceof Date) {
      return inWords(timestamp);
    } else if (typeof timestamp === "string") {
      return inWords($.timeago.parse(timestamp));
    } else if (typeof timestamp === "number") {
      return inWords(new Date(timestamp));
    } else {
      return inWords($.timeago.datetime(timestamp));
    }
  };
  var $t = $.timeago;

  $.extend($.timeago, {
    settings: {
      refreshMillis: 60000,
      allowPast: true,
      allowFuture: false,
      localeTitle: false,
      cutoff: 0,
      strings: {
        prefixAgo: null,
        prefixFromNow: null,
        suffixAgo: "مضت",
        suffixFromNow: "أضيفت الآن",
        inPast: 'في أي لحظة الآن',
        seconds: "قبل ثوان",
        minute: "دقيقة",
        minutes: "%d دقائق",
        hour: "ساعة",
        hours: "%d ساعات",
        day: "يوم",
        days: "%d أيام",
        month: "شهر",
        months: "%d شهور",
        year: "سنة",
        years: "%d سنوات",
        wordSeparator: " ",
        numbers: []
      }
    },

    inWords: function(distanceMillis) {
      if(!this.settings.allowPast && ! this.settings.allowFuture) {
          throw 'timeago allowPast and allowFuture settings can not both be set to false.';
      }

      var $l = this.settings.strings;
      var prefix = $l.prefixAgo;
      var suffix = $l.suffixAgo;
      if (this.settings.allowFuture) {
        if (distanceMillis < 0) {
          prefix = $l.prefixFromNow;
          suffix = $l.suffixFromNow;
        }
      }

      if(!this.settings.allowPast && distanceMillis >= 0) {
        return this.settings.strings.inPast;
      }

      var seconds = Math.abs(distanceMillis) / 1000;
      var minutes = seconds / 60;
      var hours = minutes / 60;
      var days = hours / 24;
      var years = days / 365;

      function substitute(stringOrFunction, number) {
        var string = $.isFunction(stringOrFunction) ? stringOrFunction(number, distanceMillis) : stringOrFunction;
        var value = ($l.numbers && $l.numbers[number]) || number;
        return string.replace(/%d/i, value);
      }

      var words = seconds < 45 && substitute($l.seconds, Math.round(seconds)) ||
        seconds < 90 && substitute($l.minute, 1) ||
        minutes < 45 && substitute($l.minutes, Math.round(minutes)) ||
        minutes < 90 && substitute($l.hour, 1) ||
        hours < 24 && substitute($l.hours, Math.round(hours)) ||
        hours < 42 && substitute($l.day, 1) ||
        days < 30 && substitute($l.days, Math.round(days)) ||
        days < 45 && substitute($l.month, 1) ||
        days < 365 && substitute($l.months, Math.round(days / 30)) ||
        years < 1.5 && substitute($l.year, 1) ||
        substitute($l.years, Math.round(years));

      var separator = $l.wordSeparator || "";
      if ($l.wordSeparator === undefined) { separator = " "; }
      return $.trim([prefix, words, suffix].join(separator));
    },

    parse: function(iso8601) {
      var s = $.trim(iso8601);
      s = s.replace(/\.\d+/,""); // remove milliseconds
      s = s.replace(/-/,"/").replace(/-/,"/");
      s = s.replace(/T/," ").replace(/Z/," UTC");
      s = s.replace(/([\+\-]\d\d)\:?(\d\d)/," $1$2"); // -04:00 -> -0400
      s = s.replace(/([\+\-]\d\d)$/," $100"); // +09 -> +0900
      return new Date(s);
    },
    datetime: function(elem) {
      var iso8601 = $t.isTime(elem) ? $(elem).attr("datetime") : $(elem).attr("title");
      return $t.parse(iso8601);
    },
    isTime: function(elem) {
      // jQuery's `is()` doesn't play well with HTML5 in IE
      return $(elem).get(0).tagName.toLowerCase() === "time"; // $(elem).is("time");
    }
  });

  // functions that can be called via $(el).timeago('action')
  // init is default when no action is given
  // functions are called with context of a single element
  var functions = {
    init: function(){
      var refresh_el = $.proxy(refresh, this);
      refresh_el();
      var $s = $t.settings;
      if ($s.refreshMillis > 0) {
        this._timeagoInterval = setInterval(refresh_el, $s.refreshMillis);
      }
    },
    update: function(time){
      var parsedTime = $t.parse(time);
      $(this).data('timeago', { datetime: parsedTime });
      if($t.settings.localeTitle) $(this).attr("title", parsedTime.toLocaleString());
      refresh.apply(this);
    },
    updateFromDOM: function(){
      $(this).data('timeago', { datetime: $t.parse( $t.isTime(this) ? $(this).attr("datetime") : $(this).attr("title") ) });
      refresh.apply(this);
    },
    dispose: function () {
      if (this._timeagoInterval) {
        window.clearInterval(this._timeagoInterval);
        this._timeagoInterval = null;
      }
    }
  };

  $.fn.timeago = function(action, options) {
    var fn = action ? functions[action] : functions.init;
    if(!fn){
      throw new Error("Unknown function name '"+ action +"' for timeago");
    }
    // each over objects here and call the requested function
    this.each(function(){
      fn.call(this, options);
    });
    return this;
  };

  function refresh() {
    var data = prepareData(this);
    var $s = $t.settings;

    if (!isNaN(data.datetime)) {
      if ( $s.cutoff == 0 || Math.abs(distance(data.datetime)) < $s.cutoff) {
        $(this).text(inWords(data.datetime));
      }
    }
    return this;
  }

  function prepareData(element) {
    element = $(element);
    if (!element.data("timeago")) {
      element.data("timeago", { datetime: $t.datetime(element) });
      var text = $.trim(element.text());
      if ($t.settings.localeTitle) {
        element.attr("title", element.data('timeago').datetime.toLocaleString());
      } else if (text.length > 0 && !($t.isTime(element) && element.attr("title"))) {
        element.attr("title", text);
      }
    }
    return element.data("timeago");
  }

  function inWords(date) {
    return $t.inWords(distance(date));
  }

  function distance(date) {
    return (new Date().getTime() - date.getTime());
  }

  // fix for IE6 suckage
  document.createElement("abbr");
  document.createElement("time");
}));
 

jQuery(document).ready(function() {
$("abbr.timeago").timeago();
});
//]]>
</script>
<script id='_waudc8'>var _wau = _wau || [];
_wau.push(["tab", "a5sjxwninjt0", "dc8", "left-middle"]);
(function() {var s=document.createElement("script"); s.async=true;
s.src="http://widgets.amung.us/tab.js";
document.getElementsByTagName("head")[0].appendChild(s);
})();</script>
<script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script></head>
<body>
<div id='top'>
<div id='nav-top'>
<div class='content'>
<ul>
<li><a href='http://goo4web.com'><i class='fa fa-home'></i> الرئيسية</a></li>
<li><a href='http://goo4web.com/p/blog-page_72.html'><i class='fa fa-users'></i> سجل الزوار</a></li>
<li><a href='http://goo4web.com/p/blog-page_3.html'><i class='fa fa-sitemap'></i> خريطة الموقع</a></li>
<li><a href='http://goo4web.com/p/blog-page_28.html'><i class='fa fa-code'></i> محول الأكواد</a></li>
<li><a href='http://goo4web.com/p/blog-page_29.html'><i class='fa fa-paint-brush'></i> الوان فلات</a></li>
<li><a href='#ContactForm1'><i class='fa fa-paper-plane'></i> أتصل بنا</a></li>
</ul>
<div class='email'>
abdosalem11@gmail.com <i class='fa fa-envelope'></i>
</div>
</div>
</div>
<div class='content'>
<div id='header'>
<div class='logo'>
<a href='http://goo4web.com'>
<img src='http://im55.gulfup.com/QfX96o.png'/>
</a>
</div>
<div class='ads'>
<script src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'></script>
<!-- Goo4Web-728x90 -->
<ins class='adsbygoogle' data-ad-client='ca-pub-3166351144883948' data-ad-slot='8329994714' style='display:inline-block;width:728px;height:90px'></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<div id='nav'>
<ul>
<li><a href='/'><i class='fa fa-home'></i> الرئيسية</a></li>
<li><a href='http://goo4web.com/search/label/بلوجر?max-results=7'><i class='fa fa-file-text'></i> بلوجر</a>
<ul>
<li><a href='http://goo4web.com/search/label/دروس%20بلوجر?max-results=7'>دروس</a></li>
<li><a href='http://goo4web.com/search/label/قوالب بلوجر?max-results=7'>قوالب</a></li>
<li><a href='http://goo4web.com/search/label/إضافات بلوجر?max-results=7'>إضافات</a></li>
</ul>
</li>
<li><a href='http://goo4web.com/search/label/ووردبريس?max-results=7'><i class='fa fa-wordpress'></i> ووردبريس</a>
<ul>
<li><a href='http://goo4web.com/search/label/قوالب ووردبريس?max-results=7'>قوالب</a></li>
<li><a href='http://goo4web.com/search/label/إضافات ووردبريس?max-results=7'>إضافات</a></li>
</ul>
</li>
<li><a href='http://goo4web.com/search/label/تصميم?max-results=7'><i class='fa fa-paint-brush'></i> تصميم</a>
<ul>
<li><a href='http://goo4web.com/search/label/دروس تصميم?max-results=7'>دروس</a></li>
<li><a href='http://goo4web.com/search/label/موك أب?max-results=7'>موك أب</a></li>
<li><a href='http://goo4web.com/search/label/ملفات%20PSD?max-results=7'>ملفات PSD</a></li>
<li><a href='http://goo4web.com/search/label/أيقونات?max-results=7'>أيقونات</a></li>
<li><a href='http://goo4web.com/search/label/خطوط?max-results=7'>خطوط</a></li>
</ul>
</li>
<li><a href='http://goo4web.com/search/label/سيو?max-results=7'><i class='fa fa-search'></i> سيو</a></li>
<li><a href='#ContactForm1'><i class='fa fa-paper-plane'></i> أتصل بنا</a></li>
</ul>
<form action='http://goo4web.com/search' method='get'>
<input name='q' placeholder='أدخل كلمة البحث...' type='text'/>
</form>
</div>
</div>
</div>
<div id='recent-posts'>
<span class='title'>أخر المواضيع</span>
<ul>
<li><a href='#'>تحميل...</a></li>
</ul>
</div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://goo4web.com/',
numpostx = 7;
$.ajax({
url: '' + url_blog + '/feeds/posts/default?alt=json-in-script&max-results=' + numpostx + '',    type: 'get',    dataType: "jsonp", success: function(data) {        var posturl, posttitle, skeleton = '', entry = data.feed.entry; if (entry !== undefined) {skeleton = "<ul>";for (var i = 0; i < entry.length; i++) { for (var j=0; j < entry[i].link.length; j++)  { if (entry[i].link[j].rel == "alternate"){ posturl = entry[i].link[j].href;  break;  }              }              
posttitle = entry[i].title.$t;
skeleton += '<li><a href="' + posturl + '" target="_blank">' + posttitle + '</a></li>';
        }
skeleton += '</ul>';
$('#recent-posts ul').html(skeleton);
// kode untuk efek pada breaking news
function tick(){
$('#recent-posts ul li:first').slideUp( function () { $(this).appendTo($('#recent-posts ul')).slideDown(); }); }
setInterval(function(){ tick () }, 5000); } else {
$('#recent-posts ul').html('<span>No result!</span>');
        }  }, error: function() {
$('#recent-posts ul').html('<strong>Error Loading Feed!</strong>');
       } }); }); 
//]]>
</script>
<div id='message'>
<i class='fa fa-quote-right'></i> لا تنظر الــفـــــرصـــة &#1548;&#1548;
بل اصــــنــعــهــــا..!  <i class='fa fa-quote-left'></i>
</div>
<div id='article-aside'>
<div class='section' id='article'><div class='widget Blog' id='Blog1'>
<div class='blog-posts hfeed'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
&#8207;إظهار الرسائل ذات التسميات <b>دروس تصميم</b>. <a href="/">إظهار كافة الرسائل</a>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'>&#8207;إظهار الرسائل ذات التسميات <b>دروس تصميم</b>. <a href="/">إظهار كافة الرسائل</a></div>
</div>
</div>
</div>
<div style='clear: both;'></div>
<!-- google_ad_section_start(name=default) -->

          <div class="date-outer">
        

          <div class="date-posts">
        
<div class='post-outer'>
<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<meta content='https://lh3.googleusercontent.com/-TJedAjlE-2E/VJxMHQqlfeI/AAAAAAAAA-Y/mxmK_zu61X8/Goo4Web-post-picture.png' itemprop='image_url'/>
<meta content='1914981488015706407' itemprop='blogId'/>
<meta content='1236743727648302416' itemprop='postId'/>
<a name='1236743727648302416'></a>
<h1 class='post-title entry-title' itemprop='name'>
<a href='/2014/12/blog-post_25.html'><i class='fa fa-bars'></i>
كيفية تخصيص مؤشر الماوس</a>
</h1>
<div class='post-body entry-content' id='post-body-1236743727648302416' itemprop='description articleBody'>
<div class='post-meta'>
<span class='post-author'><i class='fa fa-user'></i>
Abdo Salem | </span>
<span class='post-timestamp'><i class='fa fa-clock-o'></i>
<abbr class='timeago' title='2014-12-25T19:40:00+02:00'>الخميس, ديسمبر 25, 2014</abbr> | </span>
<span class='post-comments'><i class='fa fa-comments'></i>
0 تعليقات</span>
</div>
<div id='summary1236743727648302416'>
<center>
<img src="https://lh3.googleusercontent.com/-TJedAjlE-2E/VJxMHQqlfeI/AAAAAAAAA-Y/mxmK_zu61X8/Goo4Web-post-picture.png">
</center>
<h2>تخصيص مؤشر الماوس</h2>
إذا كان عندك موقع على الويب, فأكيد تحاول تخصيص العناصر الإفتراضية التي في المتصفح مثل السكرول بار ومؤشر الماوس, ليميز موقعك عن باقي مواقع الويب.<br>
<h2>كيفية تخصيص مؤشر الماوس</h2>
1 - ضع هذا الكود في ملف الـCSS الخاص بموقعك.<br>
<pre>
*
{
cursor:url(IMG-URL),default !important;
}
</pre>
2 - قم بتغيير :<br>
 - IMG-URL -> رابط صورة مؤشر الماوس.
</div>
<script type='text/javascript'>createSummaryAndThumb("summary1236743727648302416");</script>
<div id='read-more'>
<a href='/2014/12/blog-post_25.html'><button><i class='fa fa-bars'></i> اقرأ المزيد</button></a>
</div>
<div style='clear: both;'></div>
</div>
</div>
<div style='clear:both;'></div>
</div>

            </div></div>
          

          <div class="date-outer">
        

          <div class="date-posts">
        
<div class='post-outer'>
<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<meta content='https://lh6.googleusercontent.com/-MLVX8nqfO9g/VJp58F2PLGI/AAAAAAAAA-I/KuujMEBkUyA/Goo4Web-post-picture.png' itemprop='image_url'/>
<meta content='1914981488015706407' itemprop='blogId'/>
<meta content='8478721075345563110' itemprop='postId'/>
<a name='8478721075345563110'></a>
<h1 class='post-title entry-title' itemprop='name'>
<a href='/2014/12/blog-post_24.html'><i class='fa fa-bars'></i>
كيفية استخدام أيقونات الخطوط</a>
</h1>
<div class='post-body entry-content' id='post-body-8478721075345563110' itemprop='description articleBody'>
<div class='post-meta'>
<span class='post-author'><i class='fa fa-user'></i>
Abdo Salem | </span>
<span class='post-timestamp'><i class='fa fa-clock-o'></i>
<abbr class='timeago' title='2014-12-24T10:33:00+02:00'>الأربعاء, ديسمبر 24, 2014</abbr> | </span>
<span class='post-comments'><i class='fa fa-comments'></i>
1 تعليقات</span>
</div>
<div id='summary8478721075345563110'>
<center>
<img src="https://lh6.googleusercontent.com/-MLVX8nqfO9g/VJp58F2PLGI/AAAAAAAAA-I/KuujMEBkUyA/Goo4Web-post-picture.png">
</center>
<h2>استخدام أيقونات الخطوط</h2>
 أيقونات الخطوط, هي عبارة عن خط يتم تركيبه على موقع الويب, لكن بدل الحروف والأرقام يتم كتابة أيقونات, وأيقونات الخطوط هي بديل للصور, وهذه هي طريقة استخدام أيقونات الخطوط, سوف نستخدم أيقونات خط <a href = "http://fortawesome.github.io/Font-Awesome" target = "blank">Font Awesome</a>, لكن يمكنك استخدام أي خط أيقونات آخر.<br>
<h2>كيفية استخدام أيقونات الخطوط</h2>
1 - ضع هذا الكود فوق &lt;/head&gt;.
<pre>
&lt;link href = &quot;http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css&quot; rel = &quot;stylesheet&quot;/&gt;
</pre>
2 - ضع أي كود أيقونة من هذه <a href = "http://fortawesome.github.io/Font-Awesome/icons" target = "blank">الأيقونات</a> في أي مكان تريده, مثال :<br>
<pre>
&lt;i class=&quot;fa fa-file-text-o&quot;&gt;&lt;/i&gt; هذا النص هو مثال لنص يمكن أن يستبدل
</pre>
- وسيظهر لك هكذا :<br>
<i class="fa fa-file-text-o"></i> هذا النص هو مثال لنص يمكن أن يستبدل
</div>
<script type='text/javascript'>createSummaryAndThumb("summary8478721075345563110");</script>
<div id='read-more'>
<a href='/2014/12/blog-post_24.html'><button><i class='fa fa-bars'></i> اقرأ المزيد</button></a>
</div>
<div style='clear: both;'></div>
</div>
</div>
<div style='clear:both;'></div>
</div>

            </div></div>
          

          <div class="date-outer">
        

          <div class="date-posts">
        
<div class='post-outer'>
<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<meta content='https://lh5.googleusercontent.com/-0SlSG8-1_nM/VJg_PiC-fSI/AAAAAAAAA9o/Pzbltxh4sv8/Goo4Web-post-picture.png' itemprop='image_url'/>
<meta content='1914981488015706407' itemprop='blogId'/>
<meta content='260531643383383772' itemprop='postId'/>
<a name='260531643383383772'></a>
<h1 class='post-title entry-title' itemprop='name'>
<a href='/2014/12/blog-post_22.html'><i class='fa fa-bars'></i>
ما هي أيقونات الخطوط &#1567;</a>
</h1>
<div class='post-body entry-content' id='post-body-260531643383383772' itemprop='description articleBody'>
<div class='post-meta'>
<span class='post-author'><i class='fa fa-user'></i>
Abdo Salem | </span>
<span class='post-timestamp'><i class='fa fa-clock-o'></i>
<abbr class='timeago' title='2014-12-22T17:57:00+02:00'>الاثنين, ديسمبر 22, 2014</abbr> | </span>
<span class='post-comments'><i class='fa fa-comments'></i>
2 تعليقات</span>
</div>
<div id='summary260531643383383772'>
<center>
<img src="https://lh5.googleusercontent.com/-0SlSG8-1_nM/VJg_PiC-fSI/AAAAAAAAA9o/Pzbltxh4sv8/Goo4Web-post-picture.png">
</center>
<h2>ما هي أيقونات الخطوط &#1567;</h2>
أيقونات الخطوط, هي عبارة عن خط يتم تركيبه على موقع الويب, لكن بدل الحروف والأرقام يتم كتابة أيقونات, وأيقونات الخطوط هي بديل للصور.<br>
<h2>مميزات أيقونات الخطوط</h2>
1 - سهلة الاستخدام.<br>
2 - لا تأخذ مساحة من الإستضافة.<br>
3 - عالية الجودة مهما تم تكبيرها أو تصغيرها.<br>
4 - يمكن تلوينها بسهولة باستخدام الـCSS.<br>
<h2>أيقونات الخطوط المتوفرة مجانا</h2>
1 - <a href = "http://fortawesome.github.io/Font-Awesome" target = "blank">Font Awesome</a>.<br>
2 - <a href = "https://useiconic.com/open" target = "blank">Open Iconic</a>.<br>
3 - <a href = "http://www.entypo.com" target = "blank">Entypo</a>.
</div>
<script type='text/javascript'>createSummaryAndThumb("summary260531643383383772");</script>
<div id='read-more'>
<a href='/2014/12/blog-post_22.html'><button><i class='fa fa-bars'></i> اقرأ المزيد</button></a>
</div>
<div style='clear: both;'></div>
</div>
</div>
<div style='clear:both;'></div>
</div>

            </div></div>
          

          <div class="date-outer">
        

          <div class="date-posts">
        
<div class='post-outer'>
<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<meta content='https://lh6.googleusercontent.com/-GgimvazFz1c/VI3RFDvAWsI/AAAAAAAAA8A/jwQHsgN0V7c/Goo4Web-post-picture.png' itemprop='image_url'/>
<meta content='1914981488015706407' itemprop='blogId'/>
<meta content='260510311386382948' itemprop='postId'/>
<a name='260510311386382948'></a>
<h1 class='post-title entry-title' itemprop='name'>
<a href='/2014/12/blog-post_14.html'><i class='fa fa-bars'></i>
كيفية تصميم أيقونة مسطحة على الفوتوشوب</a>
</h1>
<div class='post-body entry-content' id='post-body-260510311386382948' itemprop='description articleBody'>
<div class='post-meta'>
<span class='post-author'><i class='fa fa-user'></i>
Abdo Salem | </span>
<span class='post-timestamp'><i class='fa fa-clock-o'></i>
<abbr class='timeago' title='2014-12-14T20:04:00+02:00'>الأحد, ديسمبر 14, 2014</abbr> | </span>
<span class='post-comments'><i class='fa fa-comments'></i>
0 تعليقات</span>
</div>
<div id='summary260510311386382948'>
<center>
<img src="https://lh6.googleusercontent.com/-GgimvazFz1c/VI3RFDvAWsI/AAAAAAAAA8A/jwQHsgN0V7c/Goo4Web-post-picture.png">
</center>
<h2>كيفية تصميم أيقونة مسطحة على الفوتوشوب</h2>
أسهل طريقة لتصميم أيقونة مسطحة على الفوتوشوب, في الدرس سيتم تصميم أيقونة لموقع الفيسبوك.<br><br>

<center>
<iframe width="420" height="315" src="//www.youtube.com/embed/rUOB1dtlMVE" frameborder="0" allowfullscreen></iframe>
</center>
</div>
<script type='text/javascript'>createSummaryAndThumb("summary260510311386382948");</script>
<div id='read-more'>
<a href='/2014/12/blog-post_14.html'><button><i class='fa fa-bars'></i> اقرأ المزيد</button></a>
</div>
<div style='clear: both;'></div>
</div>
</div>
<div style='clear:both;'></div>
</div>

            </div></div>
          

          <div class="date-outer">
        

          <div class="date-posts">
        
<div class='post-outer'>
<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<meta content='https://lh3.googleusercontent.com/-1J8VygkII7g/VINHTZE6Y2I/AAAAAAAAA6A/7-LFil7HijE/Goo4Web-post-picture.png' itemprop='image_url'/>
<meta content='1914981488015706407' itemprop='blogId'/>
<meta content='4746998148031688701' itemprop='postId'/>
<a name='4746998148031688701'></a>
<h1 class='post-title entry-title' itemprop='name'>
<a href='/2014/12/flat-design.html'><i class='fa fa-bars'></i>
ما هو التصميم المسطح - Flat Design &#1567;</a>
</h1>
<div class='post-body entry-content' id='post-body-4746998148031688701' itemprop='description articleBody'>
<div class='post-meta'>
<span class='post-author'><i class='fa fa-user'></i>
Abdo Salem | </span>
<span class='post-timestamp'><i class='fa fa-clock-o'></i>
<abbr class='timeago' title='2014-12-06T20:15:00+02:00'>السبت, ديسمبر 06, 2014</abbr> | </span>
<span class='post-comments'><i class='fa fa-comments'></i>
0 تعليقات</span>
</div>
<div id='summary4746998148031688701'>
<center>
<img src="https://lh3.googleusercontent.com/-1J8VygkII7g/VINHTZE6Y2I/AAAAAAAAA6A/7-LFil7HijE/Goo4Web-post-picture.png">
</center>
<h2>ما هو التصميم المسطح - Flat Design &#1567;</h2>
التصميم المسطح, هو أسلوب جديد من أساليب التصميم التي أنتشرت مؤخرا على باقي أساليب التصميم, وليس التصميم الجرافيك فقط, وإنما في مجالات أخرى كتصميم مواقع الويب وتطبيقات الهواتف والبرامج...إلخ, هذا التصميم الذي باختصار هو تصميم عرف ببساطته واستخدامه لألوان موحدة وبعده عن الحافات, الظلال, التدرجات في الألوان...إلخ.<br>
<h2>مميزات التصميم المسطح</h2>
يتميز التصميم المسطح عن باقي أساليب التصميم الأخرى بالبساطة وقلة التفاصيل والعناصر والمؤثرات داخل التصميم, ويتميز يسهولة قراءة التصميم والنظر إليه.<br>
<h2>أساسيات التصميم المسطح</h2>
الإبتعاد عن التأثيرات.<br>
التصميم البسيط.<br>
عدم استخدام تدريج الالوان.<br>
استخدام <a href = "http://goo4web.com/p/blog-page_29.html">الوان مسطحة</a>.<br>
عدم استخدام الظلال, استخدم فقط الظل الطويل.<br>
عدم استخدام الحواف في التصميم.
</div>
<script type='text/javascript'>createSummaryAndThumb("summary4746998148031688701");</script>
<div id='read-more'>
<a href='/2014/12/flat-design.html'><button><i class='fa fa-bars'></i> اقرأ المزيد</button></a>
</div>
<div style='clear: both;'></div>
</div>
</div>
<div style='clear:both;'></div>
</div>

            </div></div>
          

          <div class="date-outer">
        

          <div class="date-posts">
        
<div class='post-outer'>
<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<meta content='https://lh4.googleusercontent.com/-upyZe1wdevA/VGjYEHUzBkI/AAAAAAAAA2E/Exu6nLCK1UA/Goo4Web-post-picture.png' itemprop='image_url'/>
<meta content='1914981488015706407' itemprop='blogId'/>
<meta content='7903041385828303721' itemprop='postId'/>
<a name='7903041385828303721'></a>
<h1 class='post-title entry-title' itemprop='name'>
<a href='/2014/11/5.html'><i class='fa fa-bars'></i>
5 نصائح لتصميم شعار ناجح</a>
</h1>
<div class='post-body entry-content' id='post-body-7903041385828303721' itemprop='description articleBody'>
<div class='post-meta'>
<span class='post-author'><i class='fa fa-user'></i>
Abdo Salem | </span>
<span class='post-timestamp'><i class='fa fa-clock-o'></i>
<abbr class='timeago' title='2014-11-16T19:00:00+02:00'>الأحد, نوفمبر 16, 2014</abbr> | </span>
<span class='post-comments'><i class='fa fa-comments'></i>
3 تعليقات</span>
</div>
<div id='summary7903041385828303721'>
<center>
<img src="https://lh4.googleusercontent.com/-upyZe1wdevA/VGjYEHUzBkI/AAAAAAAAA2E/Exu6nLCK1UA/Goo4Web-post-picture.png">
</center>
<h2>5 نصائح لتصميم شعار ناجح</h2>
إن تصميم شعار لا يتطلب خيال واسع وحس فني وبراعة في الرسم فقط.. بل هو يتطلب السير على خطواط صحيحة حتى يخرج الشعار بالشكل السليم والمعبر, حتى يوصل رسالة واضحة عن محتوى الموقع أو المدونة التي تم تصميم الشعار لها.<br>
<h2>1. البساطة في الألوان</h2>
ليس غريبا أن تجد أغلب شعارات المواقع الكبيرة تستخدم لون أو لونين فقط, الإكثار من الألوان في الشعار يشوش على الناظر وقد يجعل رؤيته وفهمه صعبا.. لذلك عليك أن تحرص أن يكون الشعار بلون أو لونين أو ثلاث ألوان فقط.<br>
<h2>2. جودة الشعار</h2>
إن أفضل الشعارات هي التي يمكن رؤيتها بحجم صغير أو كبير وتكون بنفس الدقة والوضوح, أي يجب أن يكون الشعار مرن, يمكن تصغيره أو تكبيره بكل سهولة دون أن تختفي معالم الشعار.<br>
<h2>3. سهولة القراءة</h2>
إن صعوبة قراءة وفهم مضمون الشعار لا يعطي للشعار الناجح التميز والإحترافية.. بل يعطيه الفشل, إن الشعارات الناجحة هي الشعارات التي يمكنك فهمها وقراءة النص المكتوب فيها مباشرة من أول نظرة.. كما في شعار جوجل المثل العملي للبساطة وسهولة القراءة والتميز.<br>
<h2>4. فريد ومميز</h2>
كي يتذكر الناس شعارك وينطبع في مخيلتهم من أول نظرة, إجعله بارزا ومميزا ومصمم بإبداع ومعروض بطريقة مبتكرة.<br>
<h2>5. بساطة التصميم</h2>
البساطة في تفاصيل التصميم, فكلما زاد تعقيد الشعار كلما كان مبهما للناظر أكثر, والشعارات الناجحة هي الشعارات البسيطة.<br>
</div>
<script type='text/javascript'>createSummaryAndThumb("summary7903041385828303721");</script>
<div id='read-more'>
<a href='/2014/11/5.html'><button><i class='fa fa-bars'></i> اقرأ المزيد</button></a>
</div>
<div style='clear: both;'></div>
</div>
</div>
<div style='clear:both;'></div>
</div>

            </div></div>
          

          <div class="date-outer">
        

          <div class="date-posts">
        
<div class='post-outer'>
<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<meta content='https://lh3.googleusercontent.com/-syJPraSwRNs/VDA2tMgmmeI/AAAAAAAAAts/T-vicmI95YU/Goo4Web-post-picture.png' itemprop='image_url'/>
<meta content='1914981488015706407' itemprop='blogId'/>
<meta content='4057801785028827463' itemprop='postId'/>
<a name='4057801785028827463'></a>
<h1 class='post-title entry-title' itemprop='name'>
<a href='/2014/10/responsive.html'><i class='fa fa-bars'></i>
كيفية جعل موقعك متوافق مع جميع الأجهزة  - Responsive</a>
</h1>
<div class='post-body entry-content' id='post-body-4057801785028827463' itemprop='description articleBody'>
<div class='post-meta'>
<span class='post-author'><i class='fa fa-user'></i>
Abdo Salem | </span>
<span class='post-timestamp'><i class='fa fa-clock-o'></i>
<abbr class='timeago' title='2014-10-04T18:05:00+02:00'>السبت, أكتوبر 04, 2014</abbr> | </span>
<span class='post-comments'><i class='fa fa-comments'></i>
1 تعليقات</span>
</div>
<div id='summary4057801785028827463'>
<center>
<img src="https://lh3.googleusercontent.com/-syJPraSwRNs/VDA2tMgmmeI/AAAAAAAAAts/T-vicmI95YU/Goo4Web-post-picture.png" />
</center>
<h2>جعل موقعك متوافق مع جميع الأجهزة  - Responsive</h2>
إذا كنت تمتلك موقع فأكيد زوارك يدخلون موقعك بالهاتف أو الأجهزة اللوحية, يعني يجب أن يكون موقعك متوافق مع جميع الأجهزة - Responsive ليظهر جيدا في الهاتف والأجهزة اللوحية.<br />
بعض الأشخاص يظنون أن جعل مواقعهم متوافقة مع جميع الأجهزة - Responsive صعب, لكنه سهل جدا لكن يحتاج بعض الجهد لأنك كل ما ستقوم به هو إنشاء نسخة لكل نوع من أجهزة التصفح عن طريق التعديل على ملف الـCSS الخاص بموقعك.
<br />
<h2>كيفية جعل موقعك متوافق مع جميع الأجهزة  - Responsive</h2>
1 - ضع هذا الكود فوق &lt;/head&gt;.
<br />
<pre>
&lt;meta name = "viewport" content = "width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0"/&gt;
</pre>
2 - ضع هذا الكود في ملف الـCSS الخاص بموقعك.<br>
<pre>
@media screen and (max-width:1024px) { CSS FOR Max WIDTH 1024Px }
@media screen and (max-width:768px) { CSS FOR Max WIDTH 768Px }
@media screen and (max-width:640px) { CSS FOR Max WIDTH 640Px }
@media screen and (max-width:480px) { CSS FOR Max WIDTH 480Px }
@media screen and (max-width:320px) { CSS FOR Max WIDTH 320Px }
</pre>
3 - قم بتغيير :<br>
- CSS FOR Max WIDTH 1024Px -> الـCSS الخاص بالشاشات التي عرضها أقل من 1024Px.<br>
- CSS FOR Max WIDTH 768Px -> الـCSS الخاص بالشاشات التي عرضها أقل من 768Px.<br>
- CSS FOR Max WIDTH 640Px -> الـCSS الخاص بالشاشات التي عرضها أقل من 640Px.<br>
- CSS FOR Max WIDTH 480Px -> الـCSS الخاص بالشاشات التي عرضها أقل من 480Px.<br>
- CSS FOR Max WIDTH 320Px -> الـCSS الخاص بالشاشات التي عرضها أقل من 320Px.<br>
</div>
<script type='text/javascript'>createSummaryAndThumb("summary4057801785028827463");</script>
<div id='read-more'>
<a href='/2014/10/responsive.html'><button><i class='fa fa-bars'></i> اقرأ المزيد</button></a>
</div>
<div style='clear: both;'></div>
</div>
</div>
<div style='clear:both;'></div>
</div>

        </div></div>
      
<!-- google_ad_section_end -->
</div>
<div class='blog-pager' id='blog-pager'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' href='/search/label/%D8%AF%D8%B1%D9%88%D8%B3%20%D8%AA%D8%B5%D9%85%D9%8A%D9%85?updated-max=2014-10-04T18:05:00%2B02:00&amp;max-results=7&amp;start=7&amp;by-date=false' id='Blog1_blog-pager-older-link' title='رسائل أقدم'>التالي</a>
</span>
</div>
<div class='clear'></div>
<div class='blog-feeds'>
<div class='feed-links'>
الاشتراك في:
<a class='feed-link' href='/feeds/posts/default' target='_blank' type='application/atom+xml'>الرسائل (Atom)</a>
</div>
</div>
<script type="text/javascript">window.___gcfg = {'lang': 'ar'};</script>
</div></div>
<div id='aside'>
<div class='tabs'>
<ul class='tabs-titles'>
<li><a class='tab-title' href='#tab-1'><i class='fa fa-star'></i></a></li>
<li><a class='tab-title' href='#tab-2'><i class='fa fa-tags'></i></a></li>
<li><a class='tab-title' href='#tab-3'><i class='fa fa-comments'></i></a></li>
<li><a class='tab-title' href='#tab-4'><i class='fa fa-archive'></i></a></li>
</ul>
<div id='tab-1'>
<div class='tab section' id='tab-1'><div class='widget PopularPosts' id='PopularPosts2'>
<h2>.</h2>
<div class='widget-content popular-posts'>
<ul>
<li>
<div class='item-content'>
<div class='item-thumbnail'>
<a href='/2014/10/responsive.html' target='_blank'>
<img alt='' border='0' height='72' src='https://lh3.googleusercontent.com/-syJPraSwRNs/VDA2tMgmmeI/AAAAAAAAAts/T-vicmI95YU/s72-c/Goo4Web-post-picture.png' width='72'/>
</a>
</div>
<div class='item-title'><a href='/2014/10/responsive.html'>كيفية جعل موقعك متوافق مع جميع الأجهزة  - Responsive</a></div>
<div class='item-snippet'>   جعل موقعك متوافق مع جميع الأجهزة  - Responsive  إذا كنت تمتلك موقع فأكيد زوارك يدخلون موقعك بالهاتف أو الأجهزة اللوحية, يعني يجب أن يكون ...</div>
</div>
<div style='clear: both;'></div>
</li>
<li>
<div class='item-content'>
<div class='item-thumbnail'>
<a href='/2014/11/blog-post_30.html' target='_blank'>
<img alt='' border='0' height='72' src='https://lh5.googleusercontent.com/-PI4Igg_oI9o/VHszzvfDWNI/AAAAAAAAA3w/3yiyYdGosTw/s72-c/Goo4Web-post-picture.png' width='72'/>
</a>
</div>
<div class='item-title'><a href='/2014/11/blog-post_30.html'>قالب بساطا لبلوجر</a></div>
<div class='item-snippet'>   قالب بساطا لبلوجر  قالب بساطا, قالب بسيط مصمم بالتصميم المسطح, مصمم من قبل موقع جو ويب, وهو يصلح لإنشاء مدونة تقنية أو علمية, القالب لبلو...</div>
</div>
<div style='clear: both;'></div>
</li>
<li>
<div class='item-content'>
<div class='item-thumbnail'>
<a href='/2014/12/3-psd.html' target='_blank'>
<img alt='' border='0' height='72' src='https://lh5.googleusercontent.com/-knZgsSH5Mrc/VJ1gpvIh0zI/AAAAAAAAA-s/KDL9V7WxmJw/s72-c/Goo4Web-post-picture.png' width='72'/>
</a>
</div>
<div class='item-title'><a href='/2014/12/3-psd.html'>3 بنرات مسطحة - PSD</a></div>
<div class='item-snippet'>   3 بنرات مسطحة - PSD  3 بنرات رائعة مصممة بالتصميم المسطح بثلاث الوان مختلفة, يمكن استخدامها لعمل بنر إعلاني لموقعك أو مدونتك, الملف مفتوح...</div>
</div>
<div style='clear: both;'></div>
</li>
<li>
<div class='item-content'>
<div class='item-thumbnail'>
<a href='/2014/12/blog-post_31.html' target='_blank'>
<img alt='' border='0' height='72' src='https://lh5.googleusercontent.com/-r0sjEJT_BVI/VKQ7weuDGXI/AAAAAAAAA_k/GeSFdeW9T8g/s72-c/Goo4Web-post-picture.png' width='72'/>
</a>
</div>
<div class='item-title'><a href='/2014/12/blog-post_31.html'>كيفية أخذ نسخة إحتياطية لمواضيع المدونة في بلوجر</a></div>
<div class='item-snippet'>   أخذ نسخة إحتياطية لمواضيع المدونة في بلوجر  أخذ نسخة إحتياطية من مواضيع مدونتك هو أمر مهم جدا, فإذا سرقت مدونتك أو حذفت مواضيعها عن طريق ...</div>
</div>
<div style='clear: both;'></div>
</li>
<li>
<div class='item-content'>
<div class='item-thumbnail'>
<a href='/2014/12/blog-post_24.html' target='_blank'>
<img alt='' border='0' height='72' src='https://lh6.googleusercontent.com/-MLVX8nqfO9g/VJp58F2PLGI/AAAAAAAAA-I/KuujMEBkUyA/s72-c/Goo4Web-post-picture.png' width='72'/>
</a>
</div>
<div class='item-title'><a href='/2014/12/blog-post_24.html'>كيفية استخدام أيقونات الخطوط</a></div>
<div class='item-snippet'>   استخدام أيقونات الخطوط   أيقونات الخطوط, هي عبارة عن خط يتم تركيبه على موقع الويب, لكن بدل الحروف والأرقام يتم كتابة أيقونات, وأيقونات ال...</div>
</div>
<div style='clear: both;'></div>
</li>
</ul>
<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='//www.blogger.com/rearrange?blogID=1914981488015706407&widgetType=PopularPosts&widgetId=PopularPosts2&action=editWidget&sectionId=tab-1' onclick='return _WidgetManager._PopupConfig(document.getElementById("PopularPosts2"));' target='configPopularPosts2' title='تحرير'>
<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span>
</span>
<div class='clear'></div>
</div>
</div></div>
</div>
<div id='tab-2'>
<div class='tab section' id='tab-2'><div class='widget Label' id='Label1'>
<h2>.</h2>
<div class='widget-content list-label-widget-content'>
<a dir='rtl' href='/search/label/%D8%AA%D8%B5%D9%85%D9%8A%D9%85'><button><i class='fa fa-tag'></i>
تصميم</button></a>
<a dir='rtl' href='/search/label/%D8%A8%D9%84%D9%88%D8%AC%D8%B1'><button><i class='fa fa-tag'></i>
بلوجر</button></a>
<a dir='rtl' href='/search/label/%D8%A5%D8%B6%D8%A7%D9%81%D8%A7%D8%AA%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1'><button><i class='fa fa-tag'></i>
إضافات بلوجر</button></a>
<a dir='rtl' href='/search/label/%D8%B3%D9%8A%D9%88'><button><i class='fa fa-tag'></i>
سيو</button></a>
<a dir='rtl' href='/search/label/%D8%AF%D8%B1%D9%88%D8%B3%20%D8%AA%D8%B5%D9%85%D9%8A%D9%85'><button><i class='fa fa-tag'></i>
دروس تصميم</button></a>
<a dir='rtl' href='/search/label/%D8%A3%D9%8A%D9%82%D9%88%D9%86%D8%A7%D8%AA'><button><i class='fa fa-tag'></i>
أيقونات</button></a>
<a dir='rtl' href='/search/label/%D8%AE%D8%B7%D9%88%D8%B7'><button><i class='fa fa-tag'></i>
خطوط</button></a>
<a dir='rtl' href='/search/label/%D8%AF%D8%B1%D9%88%D8%B3%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1'><button><i class='fa fa-tag'></i>
دروس بلوجر</button></a>
<a dir='rtl' href='/search/label/%D9%85%D9%88%D9%83%20%D8%A3%D8%A8'><button><i class='fa fa-tag'></i>
موك أب</button></a>
<a dir='rtl' href='/search/label/%D9%85%D8%B3%D8%A7%D8%A8%D9%82%D8%A7%D8%AA%20%D9%88%D9%85%D8%AC%D8%A7%D9%86%D9%8A%D8%A7%D8%AA'><button><i class='fa fa-tag'></i>
مسابقات ومجانيات</button></a>
<a dir='rtl' href='/search/label/%D9%88%D9%88%D8%B1%D8%AF%D8%A8%D8%B1%D9%8A%D8%B3'><button><i class='fa fa-tag'></i>
ووردبريس</button></a>
<a dir='rtl' href='/search/label/%D8%A5%D8%B6%D8%A7%D9%81%D8%A7%D8%AA%20%D9%88%D9%88%D8%B1%D8%AF%D8%A8%D8%B1%D9%8A%D8%B3'><button><i class='fa fa-tag'></i>
إضافات ووردبريس</button></a>
<a dir='rtl' href='/search/label/%D9%82%D9%88%D8%A7%D9%84%D8%A8%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1'><button><i class='fa fa-tag'></i>
قوالب بلوجر</button></a>
<a dir='rtl' href='/search/label/%D9%82%D9%88%D8%A7%D9%84%D8%A8%20%D9%88%D9%88%D8%B1%D8%AF%D8%A8%D8%B1%D9%8A%D8%B3'><button><i class='fa fa-tag'></i>
قوالب ووردبريس</button></a>
<a dir='rtl' href='/search/label/%D9%85%D9%84%D9%81%D8%A7%D8%AA%20PSD'><button><i class='fa fa-tag'></i>
ملفات PSD</button></a>
<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='//www.blogger.com/rearrange?blogID=1914981488015706407&widgetType=Label&widgetId=Label1&action=editWidget&sectionId=tab-2' onclick='return _WidgetManager._PopupConfig(document.getElementById("Label1"));' target='configLabel1' title='تحرير'>
<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span>
</span>
<div class='clear'></div>
</div>
</div></div>
</div>
<div id='tab-3'>
<div class='tab section' id='tab-3'><div class='widget HTML' id='HTML1'>
<h2 class='title'>.</h2>
<div class='widget-content'>
<style type = "text/css">
ul.helploggercomments
{
list-style:none;
margin:0px;
padding:0px;
}
.helploggercomments li
{
padding:6px 0px !important;
overflow: hidden;
}
.helploggercomments li .avatarImage 
{
padding:2px;
float:right;
margin-left:5px;
border:1px solid #e0e0e0;
}
.helploggercomments li a
{
background:#f8f8f8;
display:inline-block;
padding:8px;
width:211px;
border-right:2px solid #1c7cc7;
}
.helploggercomments li img 
{
display: block;
}
.helploggercomments li span
{
width:200px;
margin-top:8px;
margin-right:8px;
display:inline-block;
font-size:12px;
font-style:italic;
}
</style>

<script type="text/javascript">
//<![CDATA[
var
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 60,
 roundAvatar = true,
 characters  = 40,
 showMorelink = false,
 moreLinktext = "More &#187;",
 defaultAvatar  = "http://thesocietypages.org/socimages/files/2009/05/vimeo.jpg",
 hideCredits = false;
//]]>
</script>
<script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/[helplogger.blogspot.com]recent-comments.js"></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&callback=helploggercomments&max-results=5"></script>
</div>
<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='//www.blogger.com/rearrange?blogID=1914981488015706407&widgetType=HTML&widgetId=HTML1&action=editWidget&sectionId=tab-3' onclick='return _WidgetManager._PopupConfig(document.getElementById("HTML1"));' target='configHTML1' title='تحرير'>
<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span>
</span>
<div class='clear'></div>
</div></div>
</div>
<div id='tab-4'>
<div class='tab section' id='tab-4'><div class='widget BlogArchive' id='BlogArchive1'>
<h2>الأرشيف</h2>
<div class='widget-content'>
<div id='ArchiveList'>
<div id='BlogArchive1_ArchiveList'>
<ul class='hierarchy'>
<li class='archivedate expanded'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy toggle-open'>&#9660;&#160;</span>
</a>
<a class='post-count-link' href='/search?updated-min=2014-01-01T00:00:00%2B02:00&amp;updated-max=2015-01-01T00:00:00%2B02:00&amp;max-results=50'>2014</a>
<span class='post-count' dir='ltr'>(55)</span>
<ul class='hierarchy'>
<li class='archivedate expanded'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy toggle-open'>&#9660;&#160;</span>
</a>
<a class='post-count-link' href='/2014_12_01_archive.html'>ديسمبر</a>
<span class='post-count' dir='ltr'>(26)</span>
<ul class='posts'>
<li><a href='/2014/12/blog-post_31.html'>كيفية أخذ نسخة إحتياطية لمواضيع المدونة في بلوجر</a></li>
<li><a href='/2014/12/blog-post_27.html'>كيفية إضافة تأثير على الصور في مدونتك في بلوجر</a></li>
<li><a href='/2014/12/blog-post_26.html'>خط أسماء للفوتوشوب</a></li>
<li><a href='/2014/12/3-psd.html'>3 بنرات مسطحة - PSD</a></li>
<li><a href='/2014/12/blog-post_25.html'>كيفية تخصيص مؤشر الماوس</a></li>
<li><a href='/2014/12/blog-post_24.html'>كيفية استخدام أيقونات الخطوط</a></li>
<li><a href='/2014/12/traffic-state-widget.html'>إضافة Traffic State Widget لمربع إحصائيات الموقع ل...</a></li>
<li><a href='/2014/12/blog-post_22.html'>ما هي أيقونات الخطوط &#1567;</a></li>
<li><a href='/2014/12/psd_37.html'>موك أب لعرض تصاميم الويب المتجاوبة - PSD</a></li>
<li><a href='/2014/12/blog-post_21.html'>إضافة تابعنا على اليوتيوب لبلوجر</a></li>
<li><a href='/2014/12/blog-post_83.html'>خط كامران للفوتوشوب</a></li>
<li><a href='/2014/12/blog-post_15.html'>إضافة الإعلانات النصية لبلوجر</a></li>
<li><a href='/2014/12/blog-post_14.html'>كيفية تصميم أيقونة مسطحة على الفوتوشوب</a></li>
<li><a href='/2014/12/blog-post_12.html'>إضافة أزرار الشبكات الإجتماعية للبلوجر</a></li>
<li><a href='/2014/12/3d-psd.html'>موك أب لنص 3D - PSD</a></li>
<li><a href='/2014/12/3000_9.html'>3000 أيقونة مختلفة - الجزء الثالث</a></li>
<li><a href='/2014/12/blog-post_18.html'>إضافة تابعنا عبر البريد الإلكتروني لبلوحر</a></li>
<li><a href='/2014/12/blog-post_8.html'>إضافة الإعلانات لبلوجر</a></li>
<li><a href='/2014/12/blog-post_7.html'>مسابقة جو ويب الثانية</a></li>
<li><a href='/2014/12/psd.html'>موك أب لكروت شخصية - PSD</a></li>
<li><a href='/2014/12/flat-design.html'>ما هو التصميم المسطح - Flat Design &#1567;</a></li>
<li><a href='/2014/12/reklame.html'>خط Reklame للفوتوشوب</a></li>
<li><a href='/2014/12/blog-post_4.html'>كيفية تركيب خط جذور فلات على المدونة في بلوجر</a></li>
<li><a href='/2014/12/3000_3.html'>3000 أيقونة مختلفة - الجزء الثاني</a></li>
<li><a href='/2014/12/blog-post.html'>قالب مدون لبلوجر</a></li>
<li><a href='/2014/12/3000.html'>3000 أيقونة مختلفة - الجزء الأول</a></li>
</ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>

          &#9668;&#160;
        
</span>
</a>
<a class='post-count-link' href='/2014_11_01_archive.html'>نوفمبر</a>
<span class='post-count' dir='ltr'>(17)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>

          &#9668;&#160;
        
</span>
</a>
<a class='post-count-link' href='/2014_10_01_archive.html'>أكتوبر</a>
<span class='post-count' dir='ltr'>(8)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>

          &#9668;&#160;
        
</span>
</a>
<a class='post-count-link' href='/2014_09_01_archive.html'>سبتمبر</a>
<span class='post-count' dir='ltr'>(4)</span>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='//www.blogger.com/rearrange?blogID=1914981488015706407&widgetType=BlogArchive&widgetId=BlogArchive1&action=editWidget&sectionId=tab-4' onclick='return _WidgetManager._PopupConfig(document.getElementById("BlogArchive1"));' target='configBlogArchive1' title='تحرير'>
<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span>
</span>
<div class='clear'></div>
</div>
</div></div>
</div>
</div>
<div class='section' id='sidebar'><div class='widget HTML' id='HTML3'>
<h2 class='title'><i class='fa  fa-facebook-square'></i>
تابعنا على الفيسبوك</h2>
<div class='widget-content'>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FGoo4Web&amp;width=300&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border: none;
overflow: hidden;
width: 300px;
height: 210px;" allowtransparency="true"></iframe>

<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Faqual.ozamaa&amp;width=300&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border: none;
overflow: hidden;
width: 300px;
height: 210px;" allowtransparency="true"></iframe>
</div>
<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='//www.blogger.com/rearrange?blogID=1914981488015706407&widgetType=HTML&widgetId=HTML3&action=editWidget&sectionId=sidebar' onclick='return _WidgetManager._PopupConfig(document.getElementById("HTML3"));' target='configHTML3' title='تحرير'>
<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span>
</span>
<div class='clear'></div>
</div><div class='widget HTML' id='HTML8'>
<h2 class='title'><i class='fa fa-youtube-square'></i>
تابعنا على اليوتيوب</h2>
<div class='widget-content'>
<span style = "float:left;">
<script src="https://apis.google.com/js/platform.js"></script>
<div class="g-ytsubscribe" data-channelid="UC-9y4eE4ehgvyKG-v4r9Akw" data-layout="full" data-count="default"></div>
</span>
</div>
<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='//www.blogger.com/rearrange?blogID=1914981488015706407&widgetType=HTML&widgetId=HTML8&action=editWidget&sectionId=sidebar' onclick='return _WidgetManager._PopupConfig(document.getElementById("HTML8"));' target='configHTML8' title='تحرير'>
<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span>
</span>
<div class='clear'></div>
</div><div class='widget HTML' id='HTML4'>
<h2 class='title'><i class='fa fa-envelope'></i>
تابعنا بالبريد الإلكتروني</h2>
<div class='widget-content'>
<span style = "font-size:11px;">
هنا تستطيع الإشتراك في قائمتنا البريدية ضع بريدك الإلكتروني بالأسفل وأضغط إشتراك ولا تنسي تأكيد إشتراكك من خلال بريدك الإلكتروني, وبعدها ستصلك كل مواضيع موقعنا الجديدة إلى بريدك الإلكتروني.
</span>
<br />
<br />
<center>
<form action="http://feedburner.google.com/fb/a/mailverify?uri=Goo4Web" method="post" target="popupwindow">
<input name="email" placeholder="البريد الإلكتروني..." type="email" style="width: 280px;"/>
<input type="submit" value="إشترك الآن !" style="width: 299px;" />
<input name="uri" type="hidden" value="Goo4Web" />
<input name="loc" type="hidden" value="en_US" />
</form>
</center>
<style>
#HTML4 input[type=submit]:hover
{
box-shadow:inset -300px 0px 0px #3498db !important;
-moz-box-shadow:inset -300px 0px 0px #3498db !important;
-webkit-box-shadow:inset -300px 0px 0px #3498db !important;
}
</style>
</div>
<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='//www.blogger.com/rearrange?blogID=1914981488015706407&widgetType=HTML&widgetId=HTML4&action=editWidget&sectionId=sidebar' onclick='return _WidgetManager._PopupConfig(document.getElementById("HTML4"));' target='configHTML4' title='تحرير'>
<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span>
</span>
<div class='clear'></div>
</div><div class='widget HTML' id='HTML6'>
<h2 class='title'><i class='fa fa-bullhorn'></i>
إعلان</h2>
<div class='widget-content'>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Goo4Web-300x250 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-3166351144883948"
     data-ad-slot="5795330716"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='//www.blogger.com/rearrange?blogID=1914981488015706407&widgetType=HTML&widgetId=HTML6&action=editWidget&sectionId=sidebar' onclick='return _WidgetManager._PopupConfig(document.getElementById("HTML6"));' target='configHTML6' title='تحرير'>
<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span>
</span>
<div class='clear'></div>
</div><div class='widget ContactForm' id='ContactForm1'>
<h2 class='title'><i class='fa fa-paper-plane'></i>
أتصل بنا</h2>
<div class='form'>
<form name='contact-form'>
<input id='ContactForm1_contact-form-name' name='name' placeholder='اسمك...' style='width:280px;' type='text'/>
<input id='ContactForm1_contact-form-email' name='email' placeholder='بريدك الإلكتروني...' style='width:280px;' type='text'/>
<textarea id='ContactForm1_contact-form-email-message' name='email-message' placeholder='رسالتك...' rows='5' style='width:280px;outline:none !important;'></textarea>
<input id='ContactForm1_contact-form-submit' style='width:299px;' styloe='height:auto !important;' type='button' value='إرسال'/>
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>
<style>
#ContactForm1 input[type=button]:hover
{
box-shadow:inset -300px 0px 0px #3498db !important;
-moz-box-shadow:inset -300px 0px 0px #3498db !important;
-webkit-box-shadow:inset -300px 0px 0px #3498db !important;
}
</style>
</div>
<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='//www.blogger.com/rearrange?blogID=1914981488015706407&widgetType=ContactForm&widgetId=ContactForm1&action=editWidget&sectionId=sidebar' onclick='return _WidgetManager._PopupConfig(document.getElementById("ContactForm1"));' target='configContactForm1' title='تحرير'>
<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span>
</span>
<div class='clear'></div>
</div></div>
</div>
</div>
<center style='margin-top:20px;'>
<a href='http://goo.gl/qgNtTR' target='blank'>
<img src='http://im89.gulfup.com/uuZ819.jpg'/>
</a>
<script src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'></script>
<!-- Goo4Web-970x90 -->
<ins class='adsbygoogle' data-ad-client='ca-pub-3166351144883948' data-ad-slot='9725135117' style='display:inline-block;width:970px;height:90px'></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</center>
<div id='bottom'>
<div class='content'>
<div id='footer'>
<div class='widget'>
<h2><i class='fa fa-home'></i> عن الموقع :</h2>
<img src='http://im50.gulfup.com/dmRO6W.png' style='width:80px;float:right;padding-left:12px;'/>
جو ويب, موقع تم إنشاؤه بتاريخ سبتمبر 2014, تم إنشاؤه على أساس تقديم محتوى حصري عن دروس بلوجر, إضافات بلوجر, قوالب بلوجر, إضافات ووردبريس, قوالب ووردبريس, دروس تصميم, دروس سيو, هذا بالإضافة إلى بعض المسابقات والمجانيات D:
</div>
<div class='widget'>
<h2><i class='fa fa-pencil'></i> عن المدون :</h2>
<img src='http://im50.gulfup.com/8EANEF.png' style='width:80px;float:right;padding-left:12px;'/>
اسمي عبدالرحمن من مصر, من مدينة طنطا, محترف JQuery ,CSS ,HTML ولدي خبرة في بلوجر والووردبريس, وأنا صاحب هذا الموقع, موقع جو ويب وأنشأته لأقدم دروس حصرية عن بلوجر والووردبريس والتصميم والسيو.
</div>
<div class='widget'>
<h2><i class='fa fa-link'></i> روابط :</h2>
<div class='footer-links'>
<a href='7' target='blank'>دروس بلوجر</a>
<a href='7' target='blank'>قوالب بلوجر</a>
<a href='7' target='blank'>إضافات بلوجر</a>
<a href='7' target='blank'>قوالب ووردبريس</a>
<a href='7' target='blank'>إضافات ووردبريس</a>
<a href='7' target='blank'>دروس تصميم</a>
<a href='' target='blank'>دروس سيو</a>
<a href='#ContactForm1'>أتصل بنا</a>
</div>
</div>
</div>
<div id='footer-bottom'>
<div class='right'>
جميع الحقوق محفوظة &#169; <a href=''>جو ويب - الويب بشكل آخر</a> 2014 | ممنوع نقل المحتوى
</div>
<div class='left'>
Powered & Designed & Development By : <a href='https://facebook.com/abdo.salem.genius' target='blank'>Abdo Salem</a>
</div>
</div>
</div>
</div>
<script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
</script><script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/2762711735-widgets.js"></script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type='text/javascript'>
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV2";window['blogger_blog_id'] = '1914981488015706407';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1914981488015706407','//www.goo4web.com/search/label/%D8%AF%D8%B1%D9%88%D8%B3%20%D8%AA%D8%B5%D9%85%D9%8A%D9%85?max-results\x3d7','1914981488015706407');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '1914981488015706407', 'bloggerUrl': 'http://www.blogger.com', 'title': 'جو ويب', 'pageType': 'index', 'url': '/search/label/%D8%AF%D8%B1%D9%88%D8%B3%20%D8%AA%D8%B5%D9%85%D9%8A%D9%85?max-results\0757', 'canonicalUrl': '/search/label/%D8%AF%D8%B1%D9%88%D8%B3%20%D8%AA%D8%B5%D9%85%D9%8A%D9%85?max-results\0757', 'canonicalHomepageUrl': '/', 'homepageUrl': '/', 'blogspotFaviconUrl': '/favicon.ico', 'enabledCommentProfileImages': true, 'adultContent': false, 'disableAdSenseWidget': false, 'analyticsAccountNumber': '', 'searchLabel': 'دروس تصميم', 'searchQuery': '', 'pageName': 'دروس تصميم', 'pageTitle': 'جو ويب: دروس تصميم', 'encoding': 'UTF-8', 'locale': 'ar', 'localeUnderscoreDelimited': 'ar', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'languageDirection': 'rtl', 'feedLinks': '\74link rel\75\42alternate\42 type\75\42application/atom+xml\42 title\75\42جو ويب - Atom\42 href\75\42/feeds/posts/default\42 /\76\n\74link rel\75\42alternate\42 type\75\42application/rss+xml\42 title\75\42جو ويب - RSS\42 href\75\42/feeds/posts/default?alt\75rss\42 /\76\n\74link rel\75\42service.post\42 type\75\42application/atom+xml\42 title\75\42جو ويب - Atom\42 href\75\42http://www.blogger.com/feeds/1914981488015706407/posts/default\42 /\76\n', 'meTag': '', 'openIdOpTag': '\74link rel\75\42openid.server\42 href\75\42http://www.blogger.com/openid-server.g\42 /\76\n\74link rel\75\42openid.delegate\42 href\75\42/\42 /\76\n', 'latencyHeadScript': '\74script type\75\42text/javascript\42\76(function() { var b\75window,f\75\42chrome\42,g\75\42tick\42,k\75\42jstiming\42;(function(){function d(a){this.t\75{};this.tick\75function(a,d,c){var e\75void 0!\75c?c:(new Date).getTime();this.t[a]\75[e,d];if(void 0\75\75c)try{b.console.timeStamp(\42CSI/\42+a)}catch(h){}};this[g](\42start\42,null,a)}var a;b.performance\46\46(a\75b.performance.timing);var n\75a?new d(a.responseStart):new d;b.jstiming\75{Timer:d,load:n};if(a){var c\75a.navigationStart,h\75a.responseStart;0\74c\46\46h\76\75c\46\46(b[k].srt\75h-c)}if(a){var e\75b[k].load;0\74c\46\46h\76\75c\46\46(e[g](\42_wtsrt\42,void 0,c),e[g](\42wtsrt_\42,\42_wtsrt\42,h),e[g](\42tbsd_\42,\42wtsrt_\42))}try{a\75null,\nb[f]\46\46b[f].csi\46\46(a\75Math.floor(b[f].csi().pageT),e\46\0460\74c\46\46(e[g](\42_tbnd\42,void 0,b[f].csi().startE),e[g](\42tbnd_\42,\42_tbnd\42,c))),null\75\75a\46\46b.gtbExternal\46\46(a\75b.gtbExternal.pageT()),null\75\75a\46\46b.external\46\46(a\75b.external.pageT,e\46\0460\74c\46\46(e[g](\42_tbnd\42,void 0,b.external.startE),e[g](\42tbnd_\42,\42_tbnd\42,c))),a\46\46(b[k].pt\75a)}catch(p){}})();b.tickAboveFold\75function(d){var a\0750;if(d.offsetParent){do a+\75d.offsetTop;while(d\75d.offsetParent)}d\75a;750\76\75d\46\46b[k].load[g](\42aft\42)};var l\75!1;function m(){l||(l\75!0,b[k].load[g](\42firstScrollTime\42))}b.addEventListener?b.addEventListener(\42scroll\42,m,!1):b.attachEvent(\42onscroll\42,m);\n })();\74/script\076', 'mobileHeadScript': '', 'ieCssRetrofitLinks': '\74!--[if IE]\76\74script type\75\42text/javascript\42 src\75\42https://www.blogger.com/static/v1/jsbin/1969951888-ieretrofit.js\42\76\74/script\76\n\74![endif]--\076', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/76f25a6f2e06af76', 'plusOneApiSrc': 'https://apis.google.com/js/plusone.js', 'sf': 'n'}}, {'name': 'skin', 'data': {'vars': {}, 'override': ''}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\75classic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\75flipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\75magazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\75mosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\75sidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\75snapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\75timeslide'}}}]);
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'article', null, document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'navMessage': '\u200fإظهار الرسائل ذات التسميات \74b\76دروس تصميم\74/b\76. \74a href\75\42/\42\76إظهار كافة الرسائل\74/a\076', 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/2245907251-lbx__ar.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/2392111094-lightbox_bundle_rtl.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts2', 'tab-1', null, document.getElementById('PopularPosts2'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label1', 'tab-2', null, document.getElementById('Label1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML1', 'tab-3', null, document.getElementById('HTML1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogArchiveView', new _WidgetInfo('BlogArchive1', 'tab-4', null, document.getElementById('BlogArchive1'), {'languageDirection': 'rtl'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML3', 'sidebar', null, document.getElementById('HTML3'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML8', 'sidebar', null, document.getElementById('HTML8'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML4', 'sidebar', null, document.getElementById('HTML4'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML6', 'sidebar', null, document.getElementById('HTML6'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'جار&#1613; الإرسال...', 'contactFormMessageSentMsg': 'تم إرسال رسالتك.', 'contactFormMessageNotSentMsg': 'تعذر إرسال الرسالة&#1548; يرجى المحاولة مرة أخرى في وقت لاحق.', 'contactFormInvalidEmailMsg': 'يلزم إدخال عنوان بريد إلكتروني صالح.', 'contactFormEmptyMessageMsg': 'لا يمكن أن يكون حقل الرسالة فارغ&#1611;ا.', 'title': 'أتصل بنا', 'blogId': '1914981488015706407', 'contactFormNameMsg': 'الاسم', 'contactFormEmailMsg': 'بريد إلكتروني', 'contactFormMessageMsg': 'رسالة', 'contactFormSendMsg': 'إرسال', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
</script>
</body>
</html>